<template>
  <el-table :data="shopList" style="width: 100%">
    <el-table-column fixed prop="proid" label="编号" width="160" />
    <el-table-column prop="category" label="商品类型" width="100" />
    <el-table-column prop="brand" label="品牌" width="100" />
    <el-table-column
      label="图片"
      width="130"
      header-align="center"
      align="center"
    >
      <template #default="scope">
        <img class="img1" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column prop="proname" label="商品简介" width="200" />
    <el-table-column prop="originprice" label="价格" width="100" />
    <el-table-column prop="discount" label="折扣" width="100" />
    <el-table-column prop="sales" label="销量" width="100" />
    <el-table-column prop="stock" label="库存" width="100" />
    <el-table-column label="是否推荐">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isrecommend"
          :active-value="1"
          :inactive-value="0"
          @change="(val:any) => updateListFlag(scope.row.proid, val)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
interface IShop {
  proid: string;
  category: string;
  brand: string;
  img1: string;
  originprice: number;
  proname: string;
  discount: number;
  sales: number;
  stock: number;
  isrecommend: number;
}
const val = ref<any>();
let shopList = reactive<IShop[]>([]);

const getshopList = () => {
  service({
    url: "/pro/list",
    params: {
      count: 2,
      limitNum: 20,
    },
  }).then((res: any) => {
    if (res.data.code === "200") {
      shopList.length = 0;
      shopList.push(...res.data.data);
    }
  });
};
const updateListFlag = (proid: string, val: any) => {
  console.log(val);

  let falg = true;
  if (val == 1) {
    falg = true;
  } else {
    falg = false;
  }
  service({
    url: "/pro/updateFlag",
    method: "post",
    data: {
      proid: proid,
      type: "isrecommend",
      flag: falg,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "更新成功！",
        type: "success",
      });
    }
  });
};

getshopList();
</script>

<style scoped>
.img1 {
  width: 120px;
  height: 120px;
}
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>